<template>
  <button
    class="simple-button"
    :class="[type, size, { disabled, active }]"
    :style="customStyles"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <i v-if="icon" :class="icon" size="16" class="icon"></i>
    <span v-if="text" class="text" :style="{fontSize:fontSize}">{{ text }}</span>
  </button>
</template>

<script>
export default {
  name: 'CustomButton',
  props: {
    // 按钮文本
    text: {
      type: String,
      default: ''
    },
    // 图标名称
    icon: {
      type: String,
      default: ''
    },
    // 按钮类型
    type: {
      type: String,
      default: 'default',
      validator: val => ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
    },
    // 按钮尺寸
    size: {
      type: String,
      default: 'medium',
      validator: val => ['small', 'medium', 'large'].includes(val)
    },
     // 新增字体大小属性
     fontSize: {
      type: [Number, String],
      default: '13px'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否激活状态
    active: {
      type: Boolean,
      default: false
    },
    // 自定义样式
    customStyle: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    customStyles() {
      return { ...this.customStyle }
    }
  }
}
</script>

<style scoped>
.simple-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
}

/* 图标样式 */
.icon {
  margin-right: 6px;
}

/* 尺寸样式 */
.small {
  height: 32px;
}

.medium {
  height: 36px;
}

.large {
  height: 40px;
}

/* 类型样式 */
.default {
  background-color: #f5f7fa;
  color: #4e5969;
}

.primary {
  background-color: #409eff;
  color: #fff;
}

.success {
  background-color: #52c41a;
  color: #fff;
}

.warning {
  background-color: #faad14;
  color: #fff;
}

.danger {
  background-color: #f5222d;
  color: #fff;
}

/* 状态样式 */
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.active {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
}

/* 交互效果 */
.simple-button:not(.disabled):hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.simple-button:not(.disabled):active {
  transform: translateY(0);
}
</style>
    